<template>
  <!-- 头部区域 -->
  <header class="header" :class="{ 'scrolled': isScrolled }">
    <div class="logo">
      <img src="@/assets/images/logo-fiexd.png" alt="Logo" v-show="isScrolled">
      <img src="@/assets/images/logo.png" alt="Logo" v-show="!isScrolled">
    </div>
    <nav class="nav" v-if="activeIndex==0">
      <ul>
        <li class="active">县志</li>
        <li class="has-dropdown" @click.stop="toggleDropdown('town')">
          <a href="#">乡镇志</a>
        </li>
        <li @click.stop="toggleDropdown('village')"><a href="#">村志</a></li>
        <li v-if="activeIndex==0"><a href="#">数字家谱</a></li>
        <li v-if="activeIndex==0"><a href="#">数字文献</a></li>
      </ul>
    </nav>

    <nav class="nav" v-else>
      <ul>
        <li >县志</li>
        <li class="has-dropdown" :class="activeIndex==1?'active':''" >乡镇志</li>
        <li :class="activeIndex==2?'active':''">村志</li>
      </ul>
    </nav>

  </header>

  <div class="dropdown" v-show="activeDropdown === 'town'">
    <div class="dropdown-title">乡镇街道</div>
    <ul class="dropdown-ul">
      <li class="dropdown-li" v-for="item in townList" :key="item.id">
        <a href="#">{{item.name}}</a>
        <i class="arrow"></i>
      </li>

    </ul>
  </div>

  <div class="dropdown dropdown2" v-show="activeDropdown === 'village'">
    <div class="dropdown-title">村社区</div>
    <ul class="dropdown-ul">
      <li class="dropdown-li" v-for="item in 24" :key="item">
        <a href="#">乡镇志</a>
      </li>
    </ul>
  </div>
  <div class="swiper-container" ref="swiperContainerRef">
    <Swiper
      :slides-per-view="1"
      :modules="[$SwiperModules.Pagination, $SwiperModules.Autoplay]"
      :autoplay="{ delay: 5000, disableOnInteraction: false }"
      :pagination="{ clickable: true ,el: '.swiper-pagination'}"
      @swiper="onSwiper"
      loop
      :speed="1000"
      @slideChange="onSlideChange"
      class="swiper-wrapper"
    >
      <SwiperSlide v-for="(slide, index) in 5" :key="index">
        <img src="@/assets/images/banner.png" />
      </SwiperSlide>

      <!-- 可以添加更多 Slide -->
    </Swiper>
    <div class="swiper-pagination"></div>  <!-- 添加 pagination 元素 -->
  </div>
</template>
<script setup> 
  // 暴露根元素给父组件
  import { ref, onMounted, onUnmounted } from 'vue';

  const props = defineProps({
    activeIndex: {
      type: Number,
      default: 0
    },
    // 乡镇街道列表
    townList: {
      type: Array,
      default: () => []
    }
  });
  const onSwiper = (swiper) => {
    console.log(swiper);
  };

  const onSlideChange = () => {
    console.log('slide change');
  };


  const swiperContainerRef = ref(null);
  const isScrolled = ref(false);

  const getSwiperHeight = () => {
    if (swiperContainerRef.value ) {
      const height = swiperContainerRef.value.offsetHeight;
      return height;
    }
    return 0;
  };

  const handleScroll = () => {
    const swiperHeight = getSwiperHeight();
    isScrolled.value = window.scrollY > swiperHeight;
  };

  onMounted(() => {
    window.addEventListener('scroll', handleScroll);
    document.addEventListener('click', handleClickOutside);
  });

  onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
  });

  const activeDropdown = ref(null);
  const toggleDropdown = (type) => {
    activeDropdown.value = activeDropdown.value === type ? null : type;
  };

  // 点击页面其他区域关闭下拉菜单
  const handleClickOutside = (event) => {
    const target = event.target;
    const dropdown = target.closest('.has-dropdown');
    if (!dropdown) {
      activeDropdown.value = null;
    }
  };

</script>
<style lang="scss" scoped>
.header {
  position:fixed;
  left: 0;
  width: 100%;
  min-width: 1280px;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0,0,0,0.15);
  padding: 10px 20px;
  transition: background 0.3s ease-in-out;
  &.scrolled{
    background: #fff;
    box-shadow: rgba($color: #333, $alpha: 0.5) 0px 0px 5px;
    li{
      color: #333!important;
    }
    a{
      color: #333!important;
      &:hover{
        color: #B52628!important;
      }
    }
  }
  .logo {
    display: flex;
    align-items: center;
    margin-left: 170px;
    img {
      height: 50px;
      margin-right: 10px;
    }
    span {
      font-size: 18px;
      color: #333;
    }
  }
  .nav {
    margin-right: 100px;
    ul {
      list-style: none;
      display: flex;
      li {
        margin:0 16px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        font-weight: 600;
        color: #FFF;
        &:nth-child(2){
          &.active{
            background: url("@/assets/images/header-bg1.png");
            width: 100px;
          }
        }
        &.active{
          background: url("@/assets/images/header-bg2.png");
          width: 88px;
          color: #FFF!important;
        }
        a {
          color: #FFF;
          font-weight: 600;        
          &.active, &:hover {
            color: #B52628;
          }
        }
      }
    }
  }
}

.dropdown{
    padding: 35px 130px;
    background: #F5F5F5;
    position: fixed;
    top: 100px;
    left: 0;
    width: 100%;
    z-index: 99;
    display: flex;
    .dropdown-title{
      font-weight: 500;
      font-size: 22px;
      color: #111111;
      margin: 14px 0;
      width: 180px;
    }
    .dropdown-ul{
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      margin-left:130px ;
      .dropdown-li{
        display: flex;
        align-items: center;
        width: 100px;
        margin: 14px 30px;
        a{
          font-weight: 500;
          font-size: 16px;
        }
        &:hover a{ 
          color: #B52628;
        }
        &:hover .arrow{
          background-image: url("@/assets/images/arrow2.png");
        }
        .arrow{
          display: inline-block;
          margin-left: 12px;
          width: 14px;
          height: 14px;
          background-image: url("@/assets/images/arrow1.png");
        }
      }
    }
  }

.swiper-container {
  height: 600px;
  position: relative;  // 确保 .swiper-pagination 的绝对定位有效
  .swiper-wrapper {
    width: 100%;
    :deep(.swiper-slide)  { 
      display: flex;
      justify-content: center;
    }
  }
  .swiper-pagination {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    z-index: 10;
    /* 修改 pagination 的圆点颜色 */
    :deep(.swiper-pagination-bullet) {
      width: 12px;  // 圆点的宽度
      height: 12px; // 圆点的高度
      display: inline-block;
      border-radius: 50%; // 圆形
      background: #fff;   // 默认颜色
      opacity: 0.8;       // 默认透明度
      margin: 0 5px;      // 圆点之间的间距
      border: 1px solid #dc3545;

      &.swiper-pagination-bullet-active {
        background: #dc3545; // 活跃状态的颜色
        border: 1px solid #fff;
        opacity: 1;          // 活跃状态的透明度
      }
    }
  }
}
</style>